<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
</head>
<body>
    <!-- 选项式 API -->
    <p>选项式 API</p>
    <div id="app">
        <p>firstName: {{ firstName }}</p>
        <p>lastName: {{ lastName }}</p>
        <p>fullName: {{ fullName }}</p>
        <p>fullName02: {{ fullName02 }}</p>
    </div>
    <script type="module">
        import { createApp } from 'https://lib.baomitu.com/vue/3.2.31/vue.esm-browser.js'
        createApp({
            data() {
                return {
                    firstName: 'hello',
                    lastName: 'lsh'
                }
            },
            mounted() {
                this.fullName02 = 'nihao vue3'
            },
            computed: {
                fullName() {
                    return `${this.firstName} ${this.lastName}`
                },
                // 有时候我们可以使用 可写用的计算属性(不常用)
                fullName02: {
                    get() {
                        return `${this.firstName} --- ${this.lastName}`
                    },
                    set(newVal) {
                        // 当运行 this.fullName02 = 'nihao vue3' 时, setter 方法会执行
                        [this.firstName, this.lastName] = newVal.split(' ')
                    }
                }
            }
        }).mount('#app');
    </script>

    <!-- 组合式 API -->
    <p>组合式 API</p>
    <div id="app1">
        <p>firstName: {{ firstName }}</p>
        <p>lastName: {{ lastName }}</p>
        <p>fullName: {{ fullName }}</p>
        <p>fullName02: {{ fullName02 }}</p>
    </div>
    <script type="module">
        import { createApp, ref, computed, onMounted } from 'https://lib.baomitu.com/vue/3.2.31/vue.esm-browser.js'
        createApp({
            setup() {
                const firstName = ref('hello')
                const lastName = ref('lsh')

                const fullName = computed(() => {
                    return `${firstName.value} ${lastName.value}`
                })

                const fullName02 = computed({
                    get() {
                        return `${firstName.value} --- ${lastName.value}`
                    },
                    set(newVal) {
                        // 注意：我们这里使用的是解构赋值语法
                        [firstName.value, lastName.value] = newVal.split(' ')
                    }
                })

                onMounted(() => {
                    console.log(fullName02)
                    fullName02.value = 'nihao vue3'
                })
              
                return {
                    firstName,
                    lastName,
                    fullName,
                    fullName02
                }
            }
        }).mount('#app1')
    </script>
</body>
</html>